<template>
  <div class="tool-bar-wrapper">
    <div class="left">
      <div class="params">
        <Tooltip v-for="item in floatMenuConfig" :key="item.key" reverse>
          <template #trigger>
            <div
              :class="keyActiveStatusMap.get(item.key) ? 'tool-active' : 'tool'"
              @click="handleClick(item.clickSignal)"
            >
              <img :src="item.icon" alt="" />
            </div>
          </template>
          {{ item.label }}
        </Tooltip>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Select, Input, Tooltip } from "cax-ui";
import { ref } from "vue";
import { floatMenuConfig, FloatMenuSignal } from "@/UI/config";
import { useFloatMenuStore } from "@/UI/store/floatMenuStore";
const floatMenuStore = useFloatMenuStore();
import { storeToRefs } from "pinia";
const { keyActiveStatusMap } = storeToRefs(floatMenuStore);

floatMenuStore.updateKeyActiveStatus(floatMenuConfig[0].key, true);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[1].key, false);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[2].key, false);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[3].key, false);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[4].key, true);
/**
 * * 同步视图工具栏
 */
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[8].key, true);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[9].key, false);
floatMenuStore.updateKeyActiveStatus(floatMenuConfig[10].key, false);

function handleClick(sig: FloatMenuSignal) {
  floatMenuStore.pub(sig, 1);
}
</script>
<style lang="less" scoped>
.tool-bar-wrapper {
  position: absolute;
  width: 800px;
  height: 48px;
  top: 162px;
  left: 56px;
  right: 0;
  margin: auto;
  z-index: 3;
  // background-color: rgba(255, 255, 255, 0.4);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  box-sizing: border-box;
  padding: 0 8px;
  color: #4c5a67;
  border-radius: 8px;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    display: flex;
    align-items: center;
  }
  .params {
    display: flex;
    align-items: center;
    margin-right: 8px;

    .tool {
      display: flex;
      width: 24px;
      height: 24px;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      margin-right: 4px;

      img {
        width: 100%;
        height: 100%;
      }

      &:hover {
        background-color: #edeff2;
      }

      &:active {
        background-color: #dcdee1;
      }
    }

    .tool-active {
      .tool();
      background-color: #dcdee1;
    }
  }
}
</style>
<style>
.vxp-select__selected {
  color: #0084ff;
}
</style>
